/**
 * YMPlayer 4 / SCSS style file
 *
 * @author  kirainmoe
 * @version 4.0
 * @link    https://github.com/kirainmoe/ymplayer
 * 
 * Copyright 2016  | The MIT Lincense
 */

// variables
$primaryColor: rgb(52,189,207);
$circleColor: rgb(206,255,255);
$progressColor: rgb(129,224,242);
$mask: rgba(51, 51, 51, 0.1);
$currentBorder: rgb(33,150,243);

// mixins
@mixin transition($val) {
	transition: $val;
	-ms-transition: $val;
	-moz-transition: $val;
	-webkit-transition: $val;
}

@mixin transform($val) {
	transform: $val;
	-ms-transform: $val;
	-moz-transform: $val;
	-webkit-transform: $val;
}

@mixin fullscreen() {
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	margin-top: 5px;

	.yp-extendBox {
		height: -moz-calc(100% - 60px);
		height: -webkit-calc(100% - 60px);
		height: calc(100% - 60px);
	}
}

ymplayer {

	width: 100%;
	height: 60px;
	display: block;

	color: #fff;
	background: $primaryColor;


	margin-top: 55px;			/* for progress bar */
	position: relative;

	@include transition(.3s all ease-in-out);

	&, * {
		box-sizing: border-box;
        direction: inherit;
	}

	svg {
		width: 20px;
		height: 20px;
		margin: 0px 10px;

		cursor: pointer;
		@include transition(.2s all);

		path {
			fill: #fff;
			@include transition(.2s all);
		}
	}
	
	// lyric and transition in song tag should be hidden
	song {
		lyric, translation {
			display: none;
		}
	}

	&.yp-boxActived {
		margin-top: 0px;
		height: 400px;
	}

	// start reuseable components
	.yp-circle {
		width: 10px;
		height: 10px;

		position: absolute;
		top: -3px;
		right: -3px;

		background: $circleColor;
		border: 2px solid #fff;

		border-radius: 360px;
		cursor: pointer;

		@include transition(.3s all);

		&:hover {
			width: 13px;
			height: 13px;

			top: -5px;
		}
	}
	// reuseable components end
	
	// Progress bar part
	.yp-progressBar {
		width: 100%;
		height: 4px;

		position: absolute;
		top: -4px;

		cursor: pointer;
		background: $progressColor;

		.yp-progressBar__outside {
			width: 100%;
			height: 100%;
		}

		.yp-progressBar__inner {
			position: relative;

			width: 0%;
			height: 100%;

			background-color: #B3E5FC;
			@include transition(.3s all ease-in-out);
		}

		.yp-lyricBalloon {
			width: auto;
			height: 35px;
			font-size: 14px;

			background: #000;
			opacity: 0.7;
			min-width: 100px;

			padding: 0px 15px;
			line-height: 35px;
		  text-align: center;

			position: absolute;
			top: -50px;

			&[empty='true'], &[inactive='yes'] { display: none; }
			p { margin: 0px; }

			.yp-tail {
				width: 0px;
				height: 0px;
				position: absolute;
				bottom: -10px;

				right: -moz-calc(50% - 4px);
				right: -webkit-calc(50% - 5px);
				right: calc(50% - 4px);

			  border-width:4px 0px 4px 13px;  
			  border-style:solid;  
			  border-color:transparent transparent transparent #000;

			  @include transform(rotate(90deg));
			} // .yp-tail
		} // .yp-lyricBalloon
	} // .yp-progressBar

	&[drag='progressDragging'] .yp-progressBar__inner {
		@include transition(0s all);
	}
	// Progress bar end
	
	// Controller part start
	.yp-controller {
		width: 100%;
		height: 60px;

		// Single detail component
		.yp-singleInfo {
			width: 60%;

			padding: 5px 5px;

			display: inline-block;
			float: left;

			.yp-albumImg {
				width: 50px;
				height: 50px;

				display: inline-block;
				float: left;
				
				background-size: cover;
				background-position: center;

				@include transition(.3s all);
			}

			.yp-singleDetail {
				display: inline-block;
				margin-left: 10px;

				.yp-singleTitle, .yp-singleArtist { margin: 0px 0px 5px 0px; }
				.yp-singleTitle {	font-size: 18px;	}
				.yp-singleArtist {	font-size: 12px;	}
			}
		}
		
		// Toggler
		.yp-toggler {
			width: 40%;
			height: 60px;

			// Flexbox old grammar
			display: -moz-box;
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;

			line-height: 70px;
			position: relative;

			.yp-volumeBar {
				width: -moz-calc(100% - 180px);
				width: -webkit-calc(100% - 180px);
				width: calc(100% - 180px);
				height: 3px;

				background: #fff;
				display: inline-block;

				margin: auto;
				cursor: pointer;

				.yp-volumeBar__inner {
					width: 100%;
					height: 100%;

					position: relative;

					background: #B3E5FC;
					@include transition(.2s all);
				}
			}
		}

	}	// .yp-controller
	// Controller part end
	
	// Extended box components
	.yp-extendBox {
		width: 100%;
		height: 0px;

		overflow: hidden;
		@include transition(.3s all ease-in-out);

		.yp-lyricBox, .yp-playList {
			height: 100%;
			display: inline-block;
		}
		.yp-lyricBox { width: 60%; }
		.yp-playList { width: 40%; }

		.yp-lyricBox {
			float: left;
			position: relative;
			overflow: hidden;
			border-right: 1px solid rgba(51, 51, 51, 0.05);

			.yp-currentLyric {
				font-size: 20px;
				font-weight: bold;
			}
		}

		.yp-playList {
			overflow: auto;

			single {
				width: 100%;
				height: 35px;

				line-height: 35px;
				display: block;

				font-size: 14px;

				padding: 0px 10px;

				position: relative;

				cursor: pointer;
				
				@include transition(.2s all);

				&:hover {
					background: $mask;
				} // hover

				.yp-listNumber {	color: #dedede;	}
				.yp-listTitle {	margin-left: 10px;	}
				.yp-listArtist {
					position: absolute;
					right: 10px;
				}
			} // .yp-playlist > single

			.yp-currentSingle {
				background: $mask;
				border-left: 4px solid $currentBorder;
			}
		} // .yp-playList

		.yp-lyricContainer {
			width: 100%;
			height: 100%;

			padding: 0px 10px;
			@include transition(.8s ease-in-out all);

			lyric {
				display: block;
				width: 100%;

				margin: 0px 0px 10px 0px;
				padding: 10px 0px 0px 0px;
				
				text-align: center;

				p {
					display: inline-block;
					margin: 0px;
				}
			}
			.yp-translation {	 font-size: 13px;	}
		} // .yp-lyricContainer

		.yp-lrcFixer {
			width: 40px;
			height: 60px;

			position: absolute;
			display: inline-block;

			top: -moz-calc(50% - 30px);
			top: -webkit-calc(50% - 30px);
			top: calc(50% - 30px);

			left: 0px;
			opacity: 1;

			padding: 8px 0px;

			background: $mask;
			@include transition(.2s all);

			&[disabled='disabled'] {	opacity: 0;	}
		}		
	}

	&[box='active'] .yp-extendBox{
		width: 100%;
		height: 340px;

		border-top: 1px solid rgba(51, 51, 51, 0.05);
	}
	// End extended box
	
	// Responsive design
	&.yp-responsive__640px, &.yp-responsive__500px {
		.yp-lyricBox, .yp-playList {
			width: 100%;
			display: inline;
			float: left;
		}
	}

	&.yp-responsive__640px[box='active'], &.yp-responsive__500px[box='active'] {
		.yp-playList {
			position: absolute;
			left: 100%;
		}

		.yp-extendBox {
			width: 100%;
			position: relative;
			overflow: auto;
		}
	}

	&.yp-responsive__640px {
		.yp-singleInfo, .yp-toggler {	width: 50%;	}
	}

	&.yp-responsive__500px {
		.yp-singleInfo {	display: none;	}
		.yp-toggler {	width: 100%;	}
	}
	// End responsive design

	// Fullscreen mode
	&:full-screen {	@include fullscreen();	}
	&:-webkit-full-screen {	@include fullscreen();	}
	&:-moz-full-screen {	@include fullscreen();	}
}
